<template>
  <div>
    <el-form  label-position="right" :model="form" ref="form" :rules="rules" label-width="100px">
      <el-form-item label="选择职业" prop="pid">
        <el-select v-model="form.pid"  placeholder="选择职业">
          <el-option
            v-for="item in pro"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择天赋" prop="tid">
        <el-select v-model="form.tid"  placeholder="选择天赋">
          <el-option
            v-for="item in tf"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择层级" prop="cid">
        <el-select v-model="form.cid"  placeholder="选择层级">
          <el-option
            v-for="item in cla"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" ></el-input>
      </el-form-item>
      <el-form-item label="选择职业">
        <el-input v-model="form.descs" type="textarea" placeholder="简介"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit()">提交</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="azlt"
      height="400"
      border
      style="width: 100%">
      <el-table-column
        prop="name"
        label="名字"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cname"
        label="圈位">
      </el-table-column>
      <el-table-column
        prop="tname"
        label="专精">
      </el-table-column>
      <el-table-column
        prop="pname"
        label="职业">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: 'addazlt',
  data () {
    return {
      form: {
        cid: '',
        pid: '',
        tid: '',
        name: '',
        descs: ''
      },
      cla: [],
      pro: [],
      tf: [],
      azlt: [],
      rules: {
        cid: [ { required: true, message: '请选择层级', trigger: 'change' }],
        pid: [ { required: true, message: '请选择职业', trigger: 'change' }],
        tid: [ { required: true, message: '请选择天赋', trigger: 'change' }],
        name: [{required: true, message: '请输入名称', trigger: 'blur'}]
      }

    }

  },

  watch: {
    'form.pid': function (val) {
      console.log(this)
      this.tid = ''
      this.tf = []
      if (val > 0) {
        this.getTianfu()
      }
    }
  },
  computed: {},
  methods: {
    getClass () {

      this.$ajax.get(this.$tourl.getazltclass).then((response) => {

        this.cla = [...response.data.data]

      })

    },
    getPro () {
      this.$ajax.get(this.$tourl.getpro).then((response) => {

        this.pro = [...response.data.data]

      })
    },
    getTianfu () {

      this.$ajax.get(this.$tourl.gettianfu, {params: {pid: this.pid}}).then((response) => {

        this.tf = [...response.data.data]

      })
    },
    getAzlt () {
      this.$ajax.get(this.$tourl.getazlt).then((response) => {

        this.azlt = response.data.data

      })
    },
    submit () {

      this.$refs['form'].validate((valid) => {
        if (valid) {
          let params =this.form

          this.$ajax.post(this.$tourl.setazlt, params).then((response) => {

            if (response.data.code == 0) {
              this.$message({
                message: '添加成功',
                showClose: true,
                type: 'success'
              })
              this.getAzlt()
            }


          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })


    }
  },
  mounted () {
    this.getPro()
    this.getClass()
    this.getAzlt()
  }
}
</script>

<style>
.el-form{
  width: 500px;
  margin-top: 20px;
}
.el-select{
  float: left;
}
</style>
